<template>
    <div class="ff-billing-quantity">
        <div class="ff-billing-quantity-list">
            <ul class="ff-billing-quantity-ul">
                <li
                    class="ff-billing-quantity-li"
                    v-for="(list, index) of item"
                    :key="index"
                >
                    <span class="ff-billing-quantity--label" @click="skip(list.url)">{{list.label}}</span>
                    <span class="ff-billing-quantity--light">{{list.count}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            item: {
                type: Array,
                default: () => [
                    {
                        label: '目标款数',
                        count: 0
                    },
                    {
                        label: '现有款数',
                        count: 0
                    },
                    {
                        label: '在途款数',
                        count: 0,
                        url: '/recommendPassage'
                    },
                    {
                        label: '可补充款数',
                        count: 0
                    },
                    {
                        label: '已提交款',
                        count: 0,
                        url: '/recommend/recommendSubmit'
                    },
                    {
                        label: '可退仓款',
                        count: 0,
                    }
                ]
            }
        },
        methods: {
            skip (val) {
                if(val)this.$router.push(val);
            }
        },
    }
</script>
<style type="text/less" lang="less">
    @import "~@/assets/css/font.less";
    .ff-billing-quantity {
        height: 56px;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        .ff-billing-quantity-ul {
            display: flex;
            .ff-billing-quantity-li {
                width: 120px;
                &:nth-child(2n+1) {
                    .ff-billing-quantity--label {
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }
            }
            .ff-billing-quantity-li:nth-child(1) {
                .ff-billing-quantity--label{
                    text-decoration: none;
                    cursor: auto;
                }
            }
        }
        .ff-billing-quantity--label {
            color: @body-common-font-color;
            padding-right: 5px;
        }
        .ff-billing-quantity--light {
            color: @font-light-color;
            font-size: @font-light-size;
        }
    }
</style>
